<template>
  <div class="Util-wrap">
    <div class="user-info">
      <div class="avatar">
        <img src="../../assets/images/user/header.jpg" alt="">
      </div>
      <div class="user-box">
        <p class="user-name">
          <span>
            {{data.userInfo.name}}
          </span>
          <span class="personal-center">
            个人中心
          </span>
        </p>
        <p>
          <span>
            stars:
          </span>
          <span>
            {{data.userInfo.stars}}
          </span>
        </p>
      </div>
    </div>
    <div class="tags">
      <h3>标签</h3>
      <div class="tag-box">
        <p></p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator"
  import { Getter, Action } from 'vuex-class'
  import { UtilData } from '@/types/components/Util.interface'
  // import {  } from "@/components" // 组件

  @Component({})
  export default class About extends Vue {
    // data
    data: UtilData = {
      componentName: 'Util',
      userInfo: {
        name: 'Bit404',
        stars: 55
      },
      tags: [
        {
          id: 1,
          tag: 'JavaScript',
        }
      ]
    }

    created() {
      //
    }
    
    activated() {
      //
    }

    mounted() {
      //
    }

  }
</script>

<style lang="less">
  @import "~@/assets/less/variables";

  .Util-wrap {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 320ms;
    .user-info {
      display: flex;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      .avatar {
        width: 45px;
        margin-right: 10px;
        cursor: pointer;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .user-box {
        flex: 1;
        p {
          span {
            cursor: pointer;
            display: inline-block;
          }
          .personal-center:hover {
            color: @Text1;
          }
        }
        .user-name{
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .tags {
      padding-top: 15px;
      h3 {
        font-weight: normal;
        cursor: pointer;
      }
      h3:hover {
        color: @Text1;
      }
    }
  }
</style>

